<template>
  <div class="edit-calendar">
    <!-- 日期组件 -->
    <el-calendar 
      v-model="value">
      <template
        slot="dateCell"
        slot-scope="{date, data}">
        <el-button 
          circle 
          @click="getDetial(data.day)"
          :type="(all_eval_date.indexOf(data.day) >=0 && data.isSelected) ? 'primary' : ''"
          :disabled="(all_eval_date.indexOf(data.day) >= 0) ? false: true">
          {{ data.day.split('-').slice(2).join('-') }} 
        </el-button>
      </template>
    </el-calendar>
    <!-- 自定义日期控件 -->
    <div class="control">
      <el-button
        round 
        size="mini" 
        :disabled = 'pre_disabled'
        type="primary" 
        @click="setValue('pre')">上个测试日</el-button>
      <el-button   
        round 
        size="mini"
        type="primary" 
        :disabled = 'next_disabled'
        @click="setValue('next')">下个测试日</el-button>
      <el-button  
        round 
        size="mini"
        type="primary" 
        :disabled = 'today_disabled'
        @click="setValue('today')"
        >今日</el-button>
    </div>
  </div>
  
</template>

<script>
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth();
var date = now.getDate();

var today_date = `${year}-${((month+1) < 10) ? '0' + (month + 1) : (month + 1) }-${date < 10 ? '0'+date : date }`
  export default {
    props:{
      all_eval_date: Array,
    },
    data() {
      return {
        value: '',
        value2: '',
        check: true,
        study_state: 'pre',
        pre_disabled: false,
        next_disabled: true,
        today_disabled: true
      }
    },
    computed: {
    },
    watch: {
     
    },
    mounted() {
      // TODO: length -1 需要后期优化处理
      this.value = this.all_eval_date[this.all_eval_date.length - 1]
      this.value2 = this.value

      // 判断今日按钮是否可点击
      console.log(today_date)
      if (this.all_eval_date.indexOf(today_date) >= 0) {
        this.today_disabled = false   
      }
    },
    methods: {
      // 执行请求当天数据
      getDetial(val) {
        this.value2 = val
        console.log('选中日期为：'+val)
      },
      // 设置选中日期
      setValue(val) {
        console.log('点击前选中：'+this.value)
        // 获取index，设置上一此练习日期；
        var index = this.all_eval_date.indexOf(this.value2)
        var length = this.all_eval_date.length
        console.log('当前值所在的索引：'+index + 'length:'+ length)
        if (val === 'pre') {
          // 是否是正数第一个值
          if (index === 1) {
            this.pre_disabled = true
          } 
          if (index == length - 1) {
            this.next_disabled = false
          }
          this.value = this.all_eval_date[index-1]
          this.value2 = this.value
        } else if (val === 'next') {
          // 判断是否是倒数第一个值
          if (index === length - 2) {
            this.next_disabled = true
          } 
          if (index === 0){
            this.pre_disabled = false
          }
          this.value = this.all_eval_date[index+1]
          this.value2 = this.value 
        } else if (val === 'today') {
          this.value = today_date
          this.value2 = this.value
          this.next_disabled = true
          this.pre_disabled = false
        }
      }
    }
  }
</script>    

<style scoped>
  
</style>